import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, ScrollView } from "react-native";
import { style } from '../../../../../theme/style';
import { GLOBAL } from '../../../../../config/global';
import { Common } from '../../../../../component/common/Common.js'
import HTTP from '../../../../../utils/http';
import { API, API_GENERATE } from '../../../../../config/api';
import { PageStatusIndex } from '../../../../../component/page-status/PageStatusIndex';
import { ProgressModal } from '../../../../../components/common/ProgressModal';

const scale = GLOBAL.SCALE;

export class LogListPage extends Component {
	static navigationOptions = ({ navigation }) => {
		return {
			headerTitle: '操作日志',
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../../../imgs/goBackEmpty.png')} />),
			headerStyle: {
				elevation: 0,
				borderBottomWidth: 0,
				backgroundColor: style.color.themeColor,
			},
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center',
			},
			headerTintColor: '#fff',
		}
	}

	constructor(props) {
		super(props);
		const { companyId } = props.navigation.state.params || {};
		this.companyId = companyId;
		this.state = {
			listData: [],
			status: 'loading',
			lightBoxData: {
				modalVisible: false,
				onClosePress: this._closeLightBox,
				title: '审批',
				rowDataList: [],
			}
		}
	}

	async componentWillMount() {
		this._init();
	}

	//初始数据处理
	_init = () => {
		this._getOperateList();
	}

	//操作日志
	async _getOperateList() {
		const listData = await HTTP.POST(API_GENERATE(API.GET_OPERATE_LIST), { companyId: this.companyId });
		if (listData) {
			this.setState({
				listData: listData,
				status: listData && listData.length ? 'data' : 'empty'
			})
		} else {
			this.setState({
				status: 'error'
			})
		}

	}

	//审批流程
	async _getLogList(data) {
		//查询审批节点AUDIT_QUERY_COMPANY
		if (!data.processInstanceId) {
			return
		}
		let params = {
			bizId: data.applyId,
			bizObjType: 'COMPANY_INFO_AUDIT',
			processInstanceId: data.processInstanceId,
		}
		let responseData1 = await HTTP.GET(API_GENERATE(API.AUDIT_QUERY_COMPANY), params)
		responseData1 = responseData1 && responseData1.map((item) => {
			if (item.auditResult == 9) {
				item.auditResultName = '操作';
			}
			return item;
		})
		let { lightBoxData } = this.state;
		lightBoxData.modalVisible = true;
		lightBoxData.title = '审批流';
		lightBoxData.rowDataList = responseData1;
		this.setState({
			lightBoxData
		})
	}

	_goChangeCreatePage(type, applyId) {
		console.log('111')
	}

	_closeLightBox = () => {
		let { lightBoxData } = this.state;
		lightBoxData.modalVisible = false;
		this.setState({ lightBoxData });
	}


	render() {
		const { status, listData, lightBoxData } = this.state;
		return (
			<ScrollView showsVerticalScrollIndicator={false}>
				<View style={styles.baseInfoContainer}>
					{
						status == 'data' ?
							listData.map((item, index) => {
								const { year, operateList } = item;
								return (
									<View key={index}>
										<Text style={[styles.rowYear, styles.label]}>{year}年</Text>
										<View style={[styles.rowView, styles.labelView]}>
											<Text style={[styles.rowItem, styles.label]}>时间</Text>
											<Text style={[styles.rowItem, styles.label]}>类型</Text>
											<Text style={[styles.rowItem, styles.label]}>状态</Text>
											<Text style={[styles.rowItem, styles.label]}>操作人（部门）</Text>
										</View>
										{
											operateList && operateList.length && operateList.map((itemList, index) => {
												const { createDate, operateType, operateTypeName, status, statusName, createByName, applyId, companyId, organName } = itemList;
												const dpt = `${createByName}（${organName}）`;
												const dptSubstr = dpt && dpt.length > 6 ? (dpt.substring(0, 6) + '...') : dpt;
												return (
													<View key={index} style={[styles.rowView, styles.valueView]}>
														<Text style={[styles.rowItem, styles.value]}>{createDate && createDate.substring(5, 16)}</Text>
														<Text style={[styles.rowItem, styles.value]}>{operateTypeName || '-'}</Text>
														<Text style={[styles.rowItem, styles.value, status !== 'EDIT' ? styles.clickBlue : null]}
															onPress={() => { status !== 'EDIT' && this._getLogList(itemList) }}>{statusName || '-'}</Text>
														<Text style={[styles.rowItem, styles.value]}>{dptSubstr}</Text>
													</View>
												)
											})
										}
									</View>
								)
							})
							: <PageStatusIndex status={status} emptyText={'暂无记录'} onErrorPress={this.reloadPage} />
					}
				</View>
				{/* 审批流 */}
				<ProgressModal {...lightBoxData} active={true} />
			</ScrollView>

		)
	}
}


const styles = StyleSheet.create({
	baseInfoContainer: {
		flex: 1,
		flexDirection: 'column',
		marginBottom: 12 * scale
	},
	rowView: {
		flexDirection: 'row',
	},
	rowYear: {
		margin: 8 * scale,
		marginTop: 24 * scale
	},
	rowItem: {
		flex: 1
	},
	labelView: {
		backgroundColor: style.color.bgGray,
		padding: 14 * scale,
	},
	label: {
		fontSize: 12 * scale,
		fontWeight: 'bold'
	},
	valueView: {
		padding: 14 * scale,
		paddingBottom: 0
	},
	value: {
		fontSize: 11 * scale,
	},
	clickBlue: {
		color: style.color.themeColor
	}
})